<template>
  <div id='echartsGlxywblqk' />
</template>

<script>
export default {
  data() {
    return {
      echartsGlxywblqk: null,
      index: 0,
      colorList:  ['#43cadd','#3893e5','#FCC708','#03B48E'],
      data: [
        {
          name: '用编计划',
          value: 164,
          number: 502.4
        },
        {
          name: '用编申请',
          value: 1543,
          number: 302.1
        },
        {
          name: '人员变动',
          value: 205,
          number: 502.9
        },
        {
          name: '机构评估',
          value: 266,
          number: 666.0
        }
      ],
      newData: []
    }
  },
  mounted() {
    this.initEchartsGlxywblqk()
    this.autoPlay()
  },
  methods: {
    initEchartsGlxywblqk() {
      const _this = this
      // 加阴影效果
      for (let i = 0; i < this.data.length; i++) {
        this.newData.push({
          value: this.data[i].value,
          name: this.data[i].name,
          itemStyle: {
            normal: {
              // borderWidth: 0,
              shadowBlur: 20,
              // borderRadius: 1,
              // borderColor: colorList[i],
              shadowColor: this.colorList[i]
            }
          }
        })
      }
      const option = {
        title: {
          text: '业务类型',
          left: '22%',
          // left: 'center',
          top: 'center',
          // x: 'left',
          // y: 'center',
          textStyle: {
            fontSize: 21,
            color: '#fff'
          }
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          type: 'scroll',
          orient: 'vertical',
          right: '15%',
          top: 'center',
          //  itemGap: 40,
          selectedMode: true,
          icon: 'pin',
          // shadowBlur:20,
          // shadowColor:"#000",
          textStyle: {
            rich: {
              a: {
                color: '#ffffff',
                fontSize: 14,
                fontWeight: 500,
                width: 80
              },
              b0: {
                // color: colorList[0],
                color: '#ffffff',
                fontSize: 14,
                fontWeight: 500
              },
              b1: {
                // color:  colorList[1],
                fontSize: 20,
                padding: [0, 30, 0, 40]
              },
              b2: {
                // color:  colorList[2],
                fontSize: 20,
                padding: [0, 30, 0, 40]
              },
              b3: {
                // color:  colorList[3],
                fontSize: 20,
                padding: [0, 30, 0, 40]
              }
            }
          },
          formatter: function(name) {
            // let title = ''
            let target = 0
            // let index = 0
            for (let i = 0, l = _this.data.length; i < l; i++) {
              if (_this.data[i].name === name) {
                target = _this.data[i].value
                // title = this.data[i].label
                // index = i < 6 ? i : 5
              }
            }
            return `{a| ${name}}{b0| ${target}个}`
          }
        },
        series: [
          {
            type: 'pie',
            center: ['30%', '50%'],
            radius: ['55%', '75%'],
            clockwise: true,
            avoidLabelOverlap: true,
            hoverOffset: 2,
            tooltip: {
              trigger: 'item',
              formatter: function(params) {
                return params.name + '：' + params.value + '个<br>占比：' + params.percent.toFixed(1) + '%'
              },
              backgroundColor: '#f3f3f3',
              textStyle: {
                color: '#666666',
                fontSize: 14,
                fontWeight: 500
              },
              padding: [10, 20],
              extraCssText: 'box-shadow: 0 0 3px rgba(0, 0, 0, 0.3);'
            },
            emphasis: {
              itemStyle: {
                borderColor: '#FFD700',
                borderWidth: 3
              }
            },
            // 启用鼠标放上去放大效果，这个挺好的
            itemStyle: {
              normal: {
                color: function(params) {
                  return _this.colorList[params.dataIndex]
                }
                // shadowBlur: 20,
                // shadowColor: function (params) {
                //     return colorListShadow[params.dataIndex];
                // },
              }
            },
            label: {
              show: false,
              position: 'outside',
              formatter: '{a|{b}：{d}%}\n{hr|}',
              rich: {
                hr: {
                  backgroundColor: 't',
                  borderRadius: 1,
                  width: 1,
                  height: 1,
                  padding: [1, 1, 0, -4]
                },
                a: {
                  padding: [-15, 7, -10, 7]
                }
              }
            },
            labelLine: {
              normal: {
                length: 10,
                length2: 15,
                lineStyle: {
                  width: 1
                }
              }
            },
            data: this.newData
          }
        ]
      }
      this.echartsGlxywblqk = this.$echarts.init(document.getElementById('echartsGlxywblqk'))
      this.echartsGlxywblqk.setOption(option)
      window.addEventListener('resize', () => this.echartsGlxywblqk.resize(), false)
    },
    // 自动播放函数
    autoPlay() {
      setInterval(() => {
        this.echartsGlxywblqk.dispatchAction({
          type: 'hideTip',
          seriesIndex: 0,
          dataIndex: this.index
        })
        // 显示提示框
        this.echartsGlxywblqk.dispatchAction({
          type: 'showTip',
          seriesIndex: 0,
          dataIndex: this.index
        })
        // 取消高亮指定的数据图形
        this.echartsGlxywblqk.dispatchAction({
          type: 'downplay',
          seriesIndex: 0,
          dataIndex: this.index === 0 ? 5 : this.index - 1
        })
        this.echartsGlxywblqk.dispatchAction({
          type: 'highlight',
          seriesIndex: 0,
          dataIndex: this.index
        })
        this.index++
        if (this.index > 5) {
          this.index = 0
        }
      }, 3000)
    }
  }
}
</script>

<style lang='scss'>
#echartsGlxywblqk {
  width: 100%;
  height: 100%;
}
</style>
